<template>
  <div class="app-container home">
    <div class="welcome-container">
      <div class="welcome-content">
        <h1>欢迎使用养老院管理系统</h1>
        <div class="welcome-text">
          <p>致力于为养老院提供专业、高效的管理解决方案</p>
          <p>让长者的生活更加美好，让管理更加便捷</p>
        </div>
        <div class="feature-grid">
          <div class="feature-item">
            <el-icon class="feature-icon"><UserFilled /></el-icon>
            <h3>人性化管理</h3>
            <p>便捷的老人信息管理</p>
          </div>
          <div class="feature-item">
            <el-icon class="feature-icon"><Calendar /></el-icon>
            <h3>智能排班</h3>
            <p>灵活的护理员排班系统</p>
          </div>
          <div class="feature-item">
            <el-icon class="feature-icon"><Notebook /></el-icon>
            <h3>健康档案</h3>
            <p>完整的健康记录追踪</p>
          </div>
          <div class="feature-item">
            <el-icon class="feature-icon"><PieChart /></el-icon>
            <h3>数据分析</h3>
            <p>直观的数据统计报表</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="Index">
import { UserFilled, Calendar, Notebook, PieChart } from '@element-plus/icons-vue';
</script>

<style scoped lang="scss">
.home {
  height: 100%;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
  overflow: hidden;
}

.welcome-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 120px);
  padding: 40px 20px;
}

.welcome-content {
  max-width: 1200px;
  width: 100%;
  text-align: center;
  animation: fadeInUp 0.8s ease-out;

  h1 {
    font-size: 42px;
    color: #2c3e50;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  .welcome-text {
    margin-bottom: 50px;

    p {
      font-size: 18px;
      color: #5e6d82;
      line-height: 1.8;
      margin: 10px 0;
    }
  }
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  padding: 20px;
  margin-top: 40px;
}

.feature-item {
  background: rgba(255, 255, 255, 0.9);
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  }

  .feature-icon {
    font-size: 40px;
    color: #67b26f;
    margin-bottom: 20px;
  }

  h3 {
    font-size: 20px;
    color: #2c3e50;
    margin-bottom: 10px;
    font-weight: 500;
  }

  p {
    font-size: 16px;
    color: #5e6d82;
    line-height: 1.6;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .welcome-content {
    h1 {
      font-size: 32px;
    }

    .welcome-text p {
      font-size: 16px;
    }
  }

  .feature-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
</style>
